<template>
  <div id="invitingfriends">
    <app-header/>
    <div class="auto1200 auto_main">
      <div class="main_left_div">
        <span class="main_span_title">新人必看</span>
        <div class="video_img" @click="handleView">
          <img src="../../assets/image/video.jpg" alt="">
        </div>
      </div>
      <div class="main_right_div">
        <ul>
          <li>
            <span>昨日分红</span>
            <p v-if="platformProfitsdata&&platformProfitsdata.yesterdayDividend">
              {{platformProfitsdata.yesterdayDividend}}
              ETH</p>
          </li>
          <li>
            <span>累计分红</span>
            <p v-if="platformProfitsdata&&platformProfitsdata.totalDividend">{{platformProfitsdata.totalDividend}}
              ETH</p>
          </li>
          <li>
            <span>累计开奖金额</span>
            <p v-if="platformProfitsdata&&platformProfitsdata.totalAward">{{platformProfitsdata.totalAward}} ETH</p>
          </li>
        </ul>
      </div>
    </div>
    <app-marquee v-if="noticeInfo" :title="noticeInfo"/>
    <div class="share-form" v-if="!registerFlag">
      <div class="form-box">
        <div>
          <label><i class="iconfont">&#xe769;</i></label>
          <input type="text" placeholder="邮箱" v-model="info.receiver" name="receiver" ref="receiver"
                 @blur="handleBlur"/>
          <span class="hiden" ref="receiver_empty">邮箱不能为空</span>
          <span class="hiden" ref="receiver_span">您输入的邮箱格式有误</span>
        </div>
        <div>
          <label><i class="iconfont">&#xe7af;</i></label>
          <input type="text" placeholder="验证码" v-model="info.code" name="code" ref="code" class="code-input"
                 @blur="handleBlur"/>
          <span :class="handeleCode?'verification-active':'verification-code'"
                @click="getCode">{{phoneCodemsg}}</span>
          <span class="hiden" ref="code_empty">验证码不能为空</span>
          <span class="hiden" ref="code_span">验证码不能为空</span>
        </div>
        <div>
          <label><i class="iconfont">&#xe614;</i></label>
          <input type="password" placeholder="新密码" v-model="info.password" name="password" ref="password"
                 @blur="handleBlur"/>
          <span class="hiden" ref="password_empty">密码不能为空</span>
          <span class="hiden" ref="password_span">密码必须由6-16位字母和数字组成</span>
        </div>
        <div class="guge-verification">
          <label><img src="../../assets/image/guge.png" alt=""></label>
          <span>谷歌验证</span>
        </div>
        <div class="submit marginTop20" @click="handleRegister">注册</div>
        <p>注册即代表你同意《1dollar.bet用户协议》</p>
      </div>
    </div>
    <!--注册成功-->
    <div class="register-success" v-if="registerFlag">
      <div class="form-box">
        <h5>恭喜注册成功</h5>
        <h5>已领取好友赠送的 <i>100 ONEBET</i></h5>
        <div class="submit marginTop80" @click="handleTry">立即试玩</div>
      </div>
    </div>
    <div class="video-box" id="video_box" v-if="videoFlag">
      <div class="video-div">
        <video width="700" height="400" controls="controls" id="video">
          <source src="https://www.artup.com/mp4/jiashu.mp4" type="video/mp4">
        </video>
      </div>
    </div>
  </div>
</template>

<script>
  import header from '@/components/header/header'
  import marquee from '@/components/marquee/marquee'
  import Api from '@/axios/api/api'

  let rejson = {
    password: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/,
    receiver: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
    code: /\S/
  }
  export default {
    name: 'invitingfriends',
    data() {
      return {
        platformProfitsdata: null,
        info: {
          receiver: '',
          password: '',
          code: ''
        },
        noticeInfo: '',
        codeTimer: null,
        handeleCode: false,
        phoneCodemsg: '发送验证码',
        countdown: 60,
        registerFlag: false,
        videoFlag: false
      }
    },
    components: {
      'app-header': header,
      'app-marquee': marquee
    },
    methods: {
      getplatformProfits() {
        Api.platformProfits().then(res => {
          let result = res.data
          if (result.code === 0) {
            this.platformProfitsdata = result.data
          } else {
            this.$message.error(result.message)
          }
        })
      },
      getNoticebar() {
        Api.noticeBar().then(res => {
          let result = res.data
          if (result.code === 0) {
            this.noticeInfo = result.data.message
          } else {
            this.$message.error(result.message)
          }
        })
      },
      getCode() {
        let self = this
        if (self.countdown !== 60) return false
        if (!self.info.receiver) {
          this.$refs.receiver_span.className = 'hiden'
          this.$refs.receiver_empty.className = 'errShow'
        } else if (!rejson.receiver.test(this.info.receiver)) {
          this.$refs.receiver_empty.className = 'hiden'
          this.$refs.receiver_span.className = 'errShow'
        } else {
          let params = {
            receiver: this.info.receiver
          }
          self.handleCountdown()
          Api.sendCode(params).then(res => {
            let result = res.data
            if (result.code === 0) {
              this.$message.success('发送成功')
              self.handleCountdown()
            } else {
              this.$message.error(result.message)
            }
          })
        }
      },
      handleCountdown() {
        let self = this
        if (self.countdown !== 60) return false
        self.handeleCode = !self.handeleCode
        if (!self.handeleCode) return false
        self.phoneCodemsg = self.countdown + 's后重新获取'
        clearInterval(self.codeTimer)
        self.codeTimer = setInterval(() => {
          self.countdown = self.countdown - 1
          if (self.countdown > 0) {
            self.phoneCodemsg = self.countdown + 's后重新获取'
          } else {
            self.countdown = 60
            self.phoneCodemsg = '发送验证码'
            self.handeleCode = false
            clearInterval(self.codeTimer)
          }
        }, 1000)
      },
      handleBlur(event) {
        let currentEl = event.target.name
        let currentVal = event.target.value
        if (currentVal) {
          this.$refs[currentEl + '_empty'].className = 'hiden'
          this.$refs[currentEl + '_span'].className = 'hiden'
          if (rejson[currentEl]) {
            if (rejson[currentEl].test(event.target.value)) {
              this.$refs[currentEl + '_span'].className = 'hiden'
            } else {
              this.$refs[currentEl + '_span'].className = 'errShow'
            }
          }
        } else {
          this.$refs[currentEl + '_empty'].className = 'errShow'
        }
      },
      handleRegister() {
        let bOk = true
        for (let name in rejson) {
          if (this.info[name] !== '') {
            this.$refs[name + '_empty'].className = 'hiden'
            this.$refs[name + '_span'].className = 'hiden'
            if (!rejson[name].test(this.info[name])) {
              this.$refs[name + '_span'].className = 'errShow'
              bOk = false
            } else {
              this.$refs[name + '_span'].className = 'hiden'
            }
          } else {
            bOk = false
            this.$refs[name + '_empty'].className = 'errShow'
          }
        }
        if (!bOk) {
          return false
        }
        Api.register(this.info).then(res => {
          let result = res.data
          if (result.code === 0) {
            this.$message.success('注册成功')
            this.registerFlag = true
          } else {
            this.$message.error(result.message)
          }
        })
      },
      handleTry() {
        this.$router.push({
          path: '/partakeGame'
        })
      },
      handleView() {
        this.videoFlag = true
        let vm = this
        setTimeout(() => {
          let ovideoBox = document.getElementById('video_box')
          document.getElementById('video').play()
          ovideoBox.onclick = function (e) {
            if (e.target.id === 'video') return false
            vm.videoFlag = false
          }
        }, 300)
      }
    },
    mounted() {
      this.getplatformProfits()
      this.getNoticebar()
    }
  }
</script>

<style lang="less">
  #invitingfriends {
    .auto_main {
      overflow: hidden;
    }
    .main_span_title {
      font-size: 28px;
      color: #000;
      padding: 30px 0;
      display: block;
    }
    .main_left_div {
      width: 750px;
      float: left;
      margin-bottom: 18px;
    }
    .video_img {
      width: 750px;
      height: 400px;
      cursor: pointer;
      img {
        height: 100%;
      }
    }
    .main_right_div {
      width: 400px;
      height: 400px;
      overflow: hidden;
      float: right;
      padding-top: 88px;
      font-family: PingFangSC-Regular;
      li {
        height: 120px;
        background: #8638FD;
        margin-bottom: 20px;
        span {
          display: block;
          font-size: 20px;
          color: #FFFFFF;
          padding: 19px 0 13px 0;
          text-align: center;
        }
        p {
          font-size: 30px;
          color: #EACC5A;
          line-height: 42px;
          text-align: center;
        }
      }
    }
    .share-form {
      width: 360px;
      height: auto;
      display: block;
      overflow: hidden;
      margin: 0 auto;
      margin-top: 24px;
      padding-bottom: 78px;
      p {
        width: 100%;
        height: 22px;
        line-height: 22px;
        display: block;
        overflow: hidden;
        margin-top: 20px;
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #A9A9A9;
        text-align: center;
      }
      .guge-verification {
        width: 100%;
        height: 26px;
        margin: 26px 0;
        display: block;
        overflow: hidden;
        border-bottom: none;
        cursor: pointer;
        > label {
          width: 26px;
          height: 26px;
          > img {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto auto;
            max-height: 100%;
            max-width: 100%;
            display: block;
            overflow: hidden;
          }
        }
        > span {
          color: #5117FD;
          line-height: 26px !important;
          font-size: 18px !important;

        }
      }
    }
    .register-success {
      width: 1200px;
      height: auto;
      display: block;
      overflow: hidden;
      text-align: center;
      margin: 0 auto;
      padding-bottom: 78px;
      margin-top: 60px;
      h5 {
        width: 100%;
        height: auto;
        line-height: 42px;
        display: block;
        overflow: hidden;
        font-family: PingFangSC-Medium;
        font-size: 30px;
        color: #000000;
        text-align: center;
        margin-top: 50px;
        > i {
          color: #381A00;
        }
      }
    }
  }
</style>
